<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" href="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
		<!-- jquery Mobile -->
		<script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
		<script src="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

		<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css" />

		<link rel="stylesheet" href="./css/scroll.css" />
		<style>
			html body {
				margin: 0;
				padding: 0;
			}

			/*页面背景*/
			.bg01 {
				/* background-image: url(img/bg2.jpg); */
				background-repeat: no-repeat;
				background-position: center top;
				background-size: cover;


			}

			#liview {
				margin-bottom: 10px;
				border-radius: 10px;
			}

			#opcitybg {
				background-color: rgba(255, 200, 0, 0.4);
				color: #000000;
				font-family: "microsoft yahei";
				font-size: 1em;
				border-radius: 0 0 20px 20px;
			}


			#liview a {
				background-color: rgba(0, 0, 0, 0.4);
				color: #FFFFFF;
				font-family: "microsoft yahei";
				font-size: 1em;
			}

			#headop {
				background-color: rgba(0, 0, 0, 0);
				color: #EEEEEE;
				border: 0px;
				text-shadow: 0;
			}

			#selectmenu {
				border: 0;
				background-color: rgba(0, 0, 0, 0);
				color: #FFaa00;
				/* font-size: 1rem; */
				/* border: 0px; */
				text-shadow: 0;
			}

			#menua {
				border: 0;
				background-color: rgba(0, 0, 0, 0);
				color: #222222;
				/* font-size: 1rem; */
				text-shadow: 0;
			}

			/* 商品列表图片大小 */
			.product div div img {
				width: 140px;
				height: 180px;
				border-radius: 1em;
			}


			a span {
				font-size: 0.6em;
			}

			a i {
				font-size: 1em;
			}

			#search {
				margin: 0;
			}

			#category {
				border-radius: 10px;
				background-color: rgba(200, 200, 200, 0.2);
				margin: 10px;
			}

			#category h1 {
				margin: 0;
				display: inline-block;
			}

			#category img {
				width: 3rem;
				height: 60px;
				border-radius: 10rem;
			}

			#category a {
				background-color: rgba(0, 0, 0, 0);
				border: 0;
				margin: 0;
				text-shadow: 0;
				font-size: 1em;
			}

			#category ul {
				background-color: rgba(0, 0, 0, 0);
				border: 0;
				margin: 0;
				text-shadow: 0;
				font-size: 1em;
			}

			#category>p {
				font-weight: bolder;
				font-size: 1em;
				padding-left: 10px;
			}

			#category span {
				font-weight: 100;
				background-color: rgba(220, 90, 0, 1);
				color: #ffffff;
				border-radius: 10px;
				font-size: 0.5em;
				padding: 3px;
			}
			.price{
				color: #FF0000;
				font-size: 1em;
			}
			.staus{
				color: #00B78B;
				border: #00B78B 1px solid;
				margin-left: 4px;
				padding: 2px;
				border-radius: 10px;
				
			}

			#footerbg {
				background-color: #FFFFFF;
				border-radius: 10px 10px 0 0;
			}
		</style>
		
		<script src="js/control/product.js"></script>
		<title>二手商品</title>
		<script>$.mobile.ajaxEnabled = false;</script>
	</head>
	<body>

		<div data-role="page" class="bg01">
			<div data-role="header" data-position="fixed" id="opcitybg">
				<a id="headop" href="c_personal.html" data-role="button" data-icon="user" data-iconpos="notext"></a>
				<h1>首页</h1>
				<a id="headop" href="c_productList.html" data-role="button" data-icon="search"
					data-iconpos="notext"></a>
			</div>


			​
			<div data-role="main" class="ui-content">
			
				<!-- 搜索框 -->
				<div>
					<form action="">
						<div class="ui-field-contain">
							<label for="search" class="ui-hidden-accessible" >搜索：</label>
							<input type="search" name="search" id="search" data-clear-btn="true" placeholder="搜索内容...">
						</div>
					</form>
				</div>

				<!-- 轮播图 -->
				<div class="container" id="scon">
					<div class="imgCon"></div>
					<a id="prev" class="btn"></a>
					<a id="next" class="btn"></a>
				</div>
				<!-- 三列布局 -->

				<div class="ui-grid-c" id="category">
					<p>二手优品 <span>&nbsp;&nbsp;100%验货保真 | 全国包邮 | 品质包退&nbsp;&nbsp;</span></p>
					<div class="ui-block-a">
						<ul data-role="listview" data-inset="true">

							<li data-icon="false" >
								<a href="c_productList.html"  data-iconshadow="false">
									<div class="ui-grid-b">
										<div class="ui-block-a">
											<img src="img/category/phone.jpg">
										</div>
									</div>
									<h2>精品手机</h2>
									<p>一年保质期</p>
								</a>
							</li>
						</ul>

					</div>
					<div class="ui-block-b">
						<ul data-role="listview" data-inset="true">

							<li data-icon="false"  data-iconshadow="false">
								<a href="#">
									<div class="ui-grid-b">
										<div class="ui-block-a">
											<img src="./img/category/camera.jpg">
										</div>
									</div>
									<h2>数码捡漏</h2>
									<p>低价保真</p>
								</a>
							</li>
						</ul>
					</div>
					<div class="ui-block-c">
						<ul data-role="listview" data-inset="true">

							<li data-icon="false">
								<a href="#">
									<div class="ui-grid-b">
										<div class="ui-block-a">
											<img src="img/category/shoe.jpg">
										</div>
									</div>
									<h2>潮鞋潮服</h2>
									<p>正品尖货</p>
								</a>
							</li>
						</ul>
					</div>
					<div class="ui-block-d">
						<ul data-role="listview" data-inset="true">

							<li data-icon="false">
								<a href="#">
									<div class="ui-grid-b">
										<div class="ui-block-a">
											<img src="img/category/pink.jpg">
										</div>
									</div>
									<h2>折扣美妆</h2>
									<p>低至9.9</p>
								</a>
							</li>
						</ul>
					</div>
				</div>

				<!-- 二级分类 -->
				<div class="ui-grid-b" id="category">

					<div class="ui-block-a">
						<ul data-role="listview" data-inset="true" data-icon="false">
							<li><a href="#"><img src="img/category/phone2.jpg" alt="chape" class="ui-li-icon">
									<h1>省心买</h1>
									<p>回收寄卖
									</p>
								</a>
							</li>
							<li><a href="#"><img src="./img/category/card.jpg" alt="card" class="ui-li-icon">
									惠卡券<p>即买即用
									</p></a></li>
						</ul>

					</div>

					<div class="ui-block-b">
						<ul data-role="listview" data-inset="true" data-icon="false">
							<li><a href="#"><img src="img/category/sheo2.jpg" alt="chape" class="ui-li-icon">
									潮玩社<p>回收寄卖
									</p></a>
							</li>
							<li><a href="#"><img src="img/category/camera.jpg" alt="card" class="ui-li-icon">
									幻数码<p>即买即用
									</p></a></li>
						</ul>
					</div>
					<div class="ui-block-c">
						<ul data-role="listview" data-inset="true" data-icon="false">
							<li><a href="#"><img src="img/category/onlive.jpg" alt="chape" class="ui-li-icon">
									线下购<p>边买边看
									</p></a>
							</li>
							<li><a href="#"><img src="img/category/pink2.jpg" alt="card" class="ui-li-icon">
									微瑕<p>大牌捡漏
									</p></a></li>
						</ul>
					</div>
				</div>

				<ul data-role="listview" data-inset="true" data-icon="false">
					<li data-role="divider">
						<div data-role="navbar">
							<ul>
								<li><a href="#anylink" id="selectmenu">优惠券</a></li>
								<li><a href="#anylink" id="menua">活动</a></li>
								<li><a href="#anylink" id="menua">促销</a></li>
							</ul>
						</div>
					</li>
					<div class="ui-grid-a" id="promotion">

						<div class="ui-block-a">
							<ul data-role="listview" data-inset="true" data-icon="false">
								<li><a href="#"><img src="img/promotion/pro1.jpg" alt="cheap">
										<h1>10元券</h1>
										<p>无门槛
										</p>
									</a>
								</li>
								<li><a href="#"><img src="img/promotion/pro2.jpg" alt="cheap">
										1元秒<p>抢券40元
										</p></a></li>
							</ul>

						</div>

						<div class="ui-block-b">
							<ul data-role="listview" data-inset="true" data-icon="false">
								<li><a href="#"><img src="img/promotion/pro3.jpg" alt="cheap">
										20元券<p>满299使用
										</p></a>
								</li>
								<li><a href="#"><img src="img/promotion/pro4.jpg" alt="cheap">
										20元券<p>满500使用
										</p></a></li>
							</ul>
						</div>

					</div>
				</ul>
				<ul data-role="listview" data-inset="true" data-icon="false">
					<li data-role="divider">
						<div data-role="navbar">
							<ul>
								<li><a href="#anylink" id="selectmenu">头条</a></li>
								<li><a href="#anylink" id="menua">表白墙</a></li>
								<li><a href="#anylink" id="menua">学习</a></li>
							</ul>
						</div>
					</li>
					<li>
						<a href="c_activity.html">
							<img src="./img/activity/activity2.jpg" class="ui-li-icon">
							<h2>二手书线下活动</h2>
							<p>二手书换购活动</p>
						</a>

					</li>
					<li>
						<a href="c_activity.html">
							<img src="./img/activity/activity3.jpg" class="ui-li-icon">
							<h2>我们毕业啦</h2>
							<p>我们毕业啦，聚是一团火，散做满天星</p>
						</a>

					</li>
				</ul>
				<!-- 网格 -->

				<div data-role="navbar">
					<ul>
						<li><a href="#anylink" id="selectmenu">猜你喜欢</a></li>
						<li><a href="#anylink" id="menua">数码</a></li>
						<li><a href="#anylink" id="menua">乐器</a></li>
						<li><a href="#anylink" id="menua">体育</a></li>
						<li><a href="#anylink" id="menua">书籍</a></li>

					</ul>
				</div>
				<div class="ui-grid-a">
					<div class="ui-block-a">
						<ul class="ui-gride-a product" data-role="listview" data-inset="true">
							
							<script>
							var productList = getProductList();
							for(let i=0;i<productList.length/2;i++)
							document.write(
								'<li data-icon="false">'+
									'<a href=s_product_details.html?id= "'+productList[i].productId+'">'+
										'<div class="ui-grid-b">'+
											'<div class="ui-block-a">'+
												'<img src="'+productList[i].productUrl[0]+'">'+
											'</div>'+
										'</div>'+
										'<h2>'+productLit[i].productTitle+'<span class="staus">'+productLit[i].status+'</span></h2>'+
										'<p>'+productLit[i].productInfo+'</p>'+
										'<p class="price">￥'+productList[i].price+' <span class="staus">数量：'+productList[i].number+'</span></p>'+
									'</a>'+
								'</li>'
							);
								
							
							</script>

							<li data-icon="false">
								<a href="s_product_details.html">
									<div class="ui-grid-b">
										<div class="ui-block-a">
											<img src="img/product/cloth1.jpg">
										</div>
									</div>
									<h2>今日新品<span class="staus">九成新</span></h2>
									<p>美美的衣裳</p>
									<p class="price">￥20 <span class="staus">数量：1</span></p>
								</a>
							</li>


							<li data-icon="false">
								<a href="#">
									<div class="ui-grid-b">
										<div class="ui-block-a">
											<img src="img/product/ca2.jpg">
										</div>
									</div>
									<h2>今日新品<span class="staus">九成新</span></h2>
									<p>美美的衣裳</p>
									<p class="price">￥20 <span class="staus">数量：1</span></p>
								</a>
							</li>

							<li data-icon="false">
								<a href="#">
									<div class="ui-grid-b">
										<div class="ui-block-a">
											<img src="img/product/cloth3.jpg">
										</div>
									</div>
									<h2>今日新品<span class="staus">九成新</span></h2>
									<p>美美的衣裳</p>
									<p class="price">￥20 <span class="staus">数量：1</span></p>
								</a>
							</li>

							<li data-icon="false">
								<a href="#">
									<div class="ui-grid-b">
										<div class="ui-block-a">
											<img src="img/product/cloth4.jpg">
										</div>
									</div>
									<h2>今日新品<span class="staus">九成新</span></h2>
									<p>美美的衣裳</p>
									<p class="price">￥20 <span class="staus">数量：1</span></p>
								</a>
							</li>

						</ul>
					</div>

					<div class="ui-block-b">

						<ul class="ui-gride-a product" data-role="listview" data-inset="true">
							
							<script>
							
							for(let i=productList.length/2 +1;i<productList.length;i++)
							document.write(
								'<li data-icon="false">'+
									'<a href=s_product_details.html?id= "'+productList[i].productId+'">'+
										'<div class="ui-grid-b">'+
											'<div class="ui-block-a">'+
												'<img src="'+productList[i].productUrl[0]+'">'+
											'</div>'+
										'</div>'+
										'<h2>'+productLit[i].productTitle+'<span class="staus">'+productLit[i].status+'</span></h2>'+
										'<p>'+productLit[i].productInfo+'</p>'+
										'<p class="price">￥'+productList[i].price+' <span class="staus">数量：'+productList[i].number+'</span></p>'+
									'</a>'+
								'</li>'
							);
								
							
							</script>

							<li data-icon="false">
								<a href="#">
									<div class="ui-grid-b">
										<div class="ui-block-a">
											<img src="img/product/ph.jpg">
										</div>
									</div>
									<h2>今日新品<span class="staus">九成新</span></h2>
									<p>美美的衣裳</p>
									<p class="price">￥20 <span class="staus">数量：1</span></p>
								</a>
							</li>


							<li data-icon="false">
								<a href="#">
									<div class="ui-grid-b">
										<div class="ui-block-a">
											<img src="img/product/ph2.jpg">
										</div>
									</div>
									<h2>今日新品<span class="staus">九成新</span></h2>
									<p>美美的衣裳</p>
									<p class="price">￥20 <span class="staus">数量：1</span></p>
								</a>
							</li>

							<li data-icon="false">
								<a href="#">
									<div class="ui-grid-b">
										<div class="ui-block-a">
											<img src="img/product/ca1.jpg">
										</div>
									</div>
									<h2>今日新品<span class="staus">九成新</span></h2>
									<p>美美的衣裳</p>
									<p class="price">￥20 <span class="staus">数量：1</span></p>
								</a>
							</li>

							<li data-icon="false">
								<a href="#">
									<div class="ui-grid-b">
										<div class="ui-block-a">
											<img src="img/product/pin1.jpg">
										</div>
									</div>
									<h2>今日新品<span class="staus">九成新</span></h2>
									<p>美美的衣裳</p>
									<p class="price">￥20 <span class="staus">数量：1</span></p>
								</a>
							</li>

						</ul>
					</div>


				</div>

				<div data-role="footer" data-position="fixed" id="footerbg">
					<div data-role="navbar">
						<ul>
							<li><a href="index.html" id="selectmenu" data-ajax="false"><i
										class="fa fa-home fa-2x"></i><br><span>首页</span></a></li>
							<li><a href="c_activity.html" id="menua" data-ajax="false"><i class="fa fa-street-view fa-2x"></i><br><span>动态</span></a>
							</li>
							<li><a href="s_shopping_cart.html" id="menua" data-ajax="false"><i
										class="fa fa-shopping-cart fa-2x"></i><br><span>收藏</span></a></li>
							<li><a href="c_message.html" id="menua" data-ajax="false"><i class="fa fa-comments-o fa-2x"></i><br><span>信息</span></a></li>
							<li><a href="c_SellerManue.html" id="menua" data-ajax="false"><i
										class="fa fa-user-circle fa-2x"></i><br><span>卖家</span></a></li>
						</ul>
					</div>
				</div>

			</div>

			<script src="./js/scroll.js"></script>
	</body>

</html>
